<template>
	<div id="home-video" class="d-flex-center d-flex-g">
		<div class="card-control">
			<mu-slide-left-transition>
				<mu-card v-show="waitToShow">
					<iframe
						:src="videoUrl"
						scrolling="no"
						border="0"
						frameborder="no"
						framespacing="0"
						allowfullscreen="true"
					>
					</iframe>
				</mu-card>
			</mu-slide-left-transition>
		</div>
	</div>
</template>

<script lang="ts">
import { createComponent } from "@vue/composition-api";

export default createComponent({
	name: "home-video",
	props: {
		videoUrl: {
			type: String,
			required: true
		},
		waitToShow: {
			type: Boolean,
			required: true
		}
	},
	setup() {
		//onUpdated(() => document.querySelector('.bpui-button-text')!.innerText = '前往' )
	}
});
</script>

<style lang="less">
#home-video {
	width: 100%;
	margin-top: 4rem;
	@media screen and(max-width: 748px) {
		margin-top: 2rem;
	}
	.card-control {
		width: 80vw;
		height: 50vw;

		@media screen and(max-width: 748px) {
			width: 95vw;
			height: 55vw;
		}
		.mu-card {
			width: 100%;
			height: 100%;
			iframe {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
